<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" title="黑名单" width="500px">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="addBlackUser()">新增黑名单</el-button>
            <el-table :data="blacklistPhones" border style="margin-top: 20px;">
                 <el-table-column label="序号" align="center" type="index" width="80"></el-table-column>
                 <el-table-column align="center" label="手机号" prop="phone">
                    <template slot-scope="scope">
                      <el-input size="small" maxlength="11" v-model="scope.row.phone" placeholder="请输入手机号"></el-input>
                    </template>
                 </el-table-column>
                 <el-table-column align="center" label="操作" width="100">
                     <template slot-scope="scope">
                         <el-button size="mini" type="text" @click="deleteBlackUser(scope.row)">删除</el-button>
                     </template>
                 </el-table-column>
            </el-table>
            <template slot="footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>

            </template>
        </el-dialog>
    </div>
</template>

<script>
import { activityInfo, updateActivityBlackList } from '@/api/activity'
export default {
    data() {
        return {
            dialogVisible: false,
            formData: {},
            blacklistPhones: []
        }
    },
    methods: {
        deleteBlackUser(idx){
            this.blacklistPhones.splice(idx, 1)
        },
        addBlackUser() {
            this.blacklistPhones.push({phone: ''})
        },
        handleClose() {
            this.blacklistPhones = []
            this.dialogVisible = false;
        },
        submit() {
            let params = {
                id: this.formData.id,
                blacklistPhones: this.blacklistPhones.map(item => item.phone)
            }
            updateActivityBlackList(params).then(res=> {
                this.$message.success(res.message)
                this.$emit('getList')
                this.handleClose()
            })
        },
        open(val) {
            activityInfo(val.id).then(res => {
                let obj = res.data;
                this.formData = obj;
                this.blacklistPhones = obj.blacklistPhones.map(v=> {
                    return {
                        phone: v
                    }
                });
            });
            this.dialogVisible = true
        }
    },
}
</script>

<style></style>